<template>
  <div>
    <div class="con">
      <div class="hander">
        <div class="hander-left"></div>
        <span
          >217021468 <a>|</a> 46987153<a>|</a> 165524088<a>|</a> 4510227</span
        >
        <div class="hander-right"></div>
      </div>
      <div class="footer">
        <span>累计确诊</span>
        <span>现存确诊</span>
        <span>累计治愈</span>
        <span>累计死亡</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyVueEcharts3",

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.con {
  width: 36.25rem;
  height: 6.875rem;
  background-color: rgba(12, 28, 94, 0.5);

  .hander {
    width: 33.75rem;
    height: 4.375rem;
    display: flex;
    justify-content: space-between;
    border: .0625rem solid #0c315e;
    margin: auto;
    .hander-left {
      width: 1.875rem;
      height: 3.125rem;
      border-left: .0625rem solid #02a6b4;
      border-top: .0625rem solid #02a6b4;
    }
    .hander-right {
      width: 1.875rem;
      height: 3.125rem;
      border-right: .0625rem solid #02a6b4;
      border-bottom: .0625rem solid #02a6b4;
      margin-top: 1.25rem;
    }
    span {
      font-size: 1.625rem;
      color: #fadc6e;
      line-height: 4.375rem;
      font-weight: 900;
      font-family: "华文楷体";
      a {
        color: #364380;
      }
    }
  }
  .footer {
    color: #aeaeaf;
    display: flex;
    justify-content: space-around;
    font-size: .875rem;
    margin-top: .5rem;
  }
}
</style>